<!doctype html>
<html>
<head>
    <title>Knot.js Example - Bookstore</title>
    <link rel="stylesheet" href="styles/example.css">

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <link rel="stylesheet" href="./styles/github.css">
    <script src="js/highlight.pack"></script>

    <link rel="stylesheet" href="styles/tabpage.css">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>


    <script src="../src/core/PrivateScope.js"></script>
    <script src="../src/core/Utility.js"></script>
    <script src="../src/core/Deferred.js"></script>
    <script src="../src/core/AttachedData.js"></script>
    <script src="../src/core/DataObserver.js"></script>
    <script src="../src/core/ArrayMonitor.js"></script>
    <script src="../src/core/GlobalSymbolHelper.js"></script>
    <script src="../src/core/OptionParser.js"></script>
    <script src="../src/core/KnotManager.js"></script>
    <script src="../src/core/CBSLoader.js"></script>
    <script src="../src/core/HTMLAPProvider.js"></script>
    <script src="../src/core/HTMLKnotBuilder.js"></script>
    <script src="../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../src/core/ComponentAPProvider.js"></script>
    <script src="../src/core/WindowHashStatus.js"></script>
    <script src="../src/core/KnotInterface.js"></script>

    <link rel="stylesheet" href="styles/tabpage.css">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
    <script src="js/tabpage.js" id="tabPageSource"></script>
    <script type="text/javascript" src="js/sourceTab.js"></script>

    <script src="../src/debugger/knot.debug.js"></script>

    <link rel="stylesheet" href="styles/bookstore.css" class="exampleCSS">
    <script src="js/bookstore.js" class="exampleJS"></script>
    <script type="text/cbs" src="cbs/bookstore.cbs" class="exampleCBS"></script>

</head>
<body>

<section class="knot_example">
    <h2>Knot.js example - Bookstore</h2>
    <b>All of the text and images are from Amazon.com</b>

    <div id="navMenu">
        <ul>
            <li knot-template></li>
        </ul>
    </div>

    <div id="contentContainer"></div>

    <div id="booksList" knot-template-id="bookListTemplate">
    <ul>
        <li knot-template>
            <img>
            <div></div>
        </li>
    </ul>
    </div>

    <div id="bookDetails" knot-template-id="bookDetailsTemplate">
        <div>
        <h2></h2>
        <img>
        <p></p>
        <button>Return</button>
        </div>
    </div>
</section>


<div id="sourceTab" knot-debugger-ignore  knot-component="SourceTabPage">

</div>
<script type="text/cbs">
        #sourceTab{
            sourceInfo:/sourceCodeInfo.codes
        }
    </script>
<script>
    //collect source codes before knot changes the HTML
    window.sourceCodeInfo = {codes:null};

    window.SourceCodeHelper.collectSourceCodes(
            [{selector:".knot_example",title:"HTML", type:"html"},
                {selector:".exampleJS",title:"Javascript", type:"javascript"},
                {selector:".exampleCBS",title:"CBS", type:"cbs"},
                {selector:".exampleCSS",title:"CSS", type:"css"}],
            function(res){
                window.sourceCodeInfo.codes = res;
            });
</script>
</body>
</div>
</body>
</html>